<template>
<div class="about-box">
    <h3>About组件</h3>
    <router-link to="/about/tab1">tab1</router-link>
    <router-link to="/about/tab2">tab2</router-link>
<hr>
<router-view></router-view>
</div>                 
</template>

<script setup>
import {useRoute}  from 'vue-router';
import {watch} from 'vue';
const route = useRoute();
watch(() => route.path, (path) => {
    console.log('path:', path);
});
</script>

<style scoped>
.about-box {
    min-height: 150px;
    background-color:  gainsboro;
    padding: 15px;
}
.about-box a {
    padding: 10px;
   border: 1px solid #ccc;
   border-radius: 5px;
   padding: 5px 10px;
   color: #000;
   margin: 0 5px;
}
.about-box a.router-link-active {
    color:#000;
    background-color: #fff000;
}
</style>